<!-- 更新商户信息 -->
<script setup lang="ts">
import { ElInput, ElMessage } from "element-plus";
import ProFormMax from "@/modules/package/form/components/ProFormMax.vue";
import ApiMerchant from "@/api/merchant";
import UploaderSingle from "@/components/common/UploaderSingle.vue";
import regMenu from "@/utils/reg";

const { source, modalApi } = defineProps<{
  source?: any;
  modalApi?: any;
}>();

const emits = defineEmits<{
  success: [];
}>();

const formSchema = [
  {
    label: "品牌Logo",
    children: {
      type: UploaderSingle,
      field: "merchant_logo_png",
      props: { placeholder: "请上传品牌Logo" },
    },
  },
  {
    label: "品牌名称",
    children: {
      type: ElInput,
      field: "merchant_title",
      props: { placeholder: "请输入品牌名称" },
    },
  },
  {
    label: "联系人",
    children: {
      type: ElInput,
      field: "contact_name",
      props: { placeholder: "请输入联系人" },
    },
  },
  {
    label: "联系电话",
    children: {
      type: ElInput,
      field: "contact_phone",
      props: { placeholder: "请输入联系电话" },
    },
  },
  {
    label: "联系人职位",
    children: {
      type: ElInput,
      field: "contact_position",
      props: { placeholder: "请输入联系人职位" },
    },
  },
];

const rules = {
  merchant_logo_png: { required: true, message: "请上传品牌Logo" },
  merchant_title: { required: true, message: "请输入品牌名称" },
  contact_name: { required: true, message: "请输入联系人" },
  contact_phone: [
    { required: true, message: "请输入联系电话" },
    { pattern: regMenu.mobile, message: "格式不正确" },
  ],
  contact_position: { required: true, message: "请输入联系人职位" },
};

const service: any = [
  ApiMerchant.updateMerchantDetail,
  { defaultModel: { ...source } },
];

function handleSuccess() {
  ElMessage.success("操作成功！");
  emits("success");
  modalApi?.close();
}
</script>

<template>
  <ProFormMax
    :col="24"
    :rules="rules"
    :service="service"
    :form-items="formSchema"
    labelWidth="7em"
    @success="handleSuccess"
  />
</template>
